<template>
  <view class="page_box">
    <head-box></head-box>
    <view class="top_img">
      <image :src="vote.votePic" mode="aspectFill"></image>
    </view>
    <view class="top_con">
      <view class="top_con_box">
        <view class="vote_title">{{ vote.voteTitle }}</view>
        <view class="vote_time"
          >开始时间：<text class="times">{{ vote.voteStarttime }}</text></view
        >
        <view class="vote_time"
          >结束时间：<text class="times">{{ vote.voteEndtime }}</text></view
        >
        <view class="vote_time"
          >投票区间：<text class="times"
            >每次 投 {{ vote.voteMinnum }} 至 {{ vote.voteMaxnum }} 个</text
          ></view
        >
        <view class="vote_cons">
          <rich-text class="mian_body" :nodes="vote.voteIntroduce"></rich-text>
        </view>
        <view v-if="vote.isPublic == 1" class="vote_title_r" @tap="onShare"
          >邀请投票 <image src="../../static/img/zf.png"></image
        ></view>
      </view>
    </view>

    <view class="vote_box">
      <view class="vote_item" v-for="(item, index) in list">
        <view class="vote_mc">第{{ index + 1 }}名</view>
        <view class="vote_box1">
          <view
            class="vote_img"
            @tap="$api.handleMenu(`/pages/vote/vote?id=${item.id}&mc=${index}`)"
          >
            <image :src="item.voteoptionPic" mode="aspectFill"></image>
          </view>
          <view
            class="vote_number"
            @tap="$api.handleMenu(`/pages/vote/vote?id=${item.id}&mc=${index}`)"
            >{{ item.voteoptionNum }}票</view
          >
          <view
            class="vote_name"
            @tap="$api.handleMenu(`/pages/vote/vote?id=${item.id}&mc=${index}`)"
            >{{ item.voteoptionName }}</view
          >
          <button class="vote_btn" type="primary" v-if="isSel(item.id) == 1" @tap="selVote(item.id)"
            >投票</button
          >
          <button
            class="vote_btn_disable"
            type="primary"
            v-if="isSel(item.id) == 2"
            @tap="selVote(item.id)"
            >已选择</button
          >
          <button class="vote_btn_disable" type="primary" v-if="isSel(item.id) == 3">投票</button>
        </view>
      </view>
    </view>
    <view class="b_box_mian tab-botton">
      <view class="b_box_msg"
        >本次投票活动每日 只能投 {{ vote.voteMinnum }} 至 {{ vote.voteMaxnum }} 个</view
      >
      <view class="b_box">
        <view class="b_box1"
          >您目前已选择 <text class="select">{{ voteList.length }}</text> 票</view
        >
        <view
          class="b_box2 nobtn"
          v-if="voteList.length < vote.voteMinnum || voteList.length > vote.voteMaxnum"
          >确定投票</view
        >
        <view class="b_box2" @tap="addVote" v-else>确定投票</view>
      </view>
    </view>

    <tabs-box></tabs-box>
    <!-- 分享 -->
    <pointshare :show="isShow" @close="onClose"></pointshare>
  </view>
</template>

<script>
  import {
    voteInfo,
    canVote,
    addVote,
    getvoteList,
    gpUserInfo,
  } from '@/api/vote'
  import {getSignature} from '@/api/news'
  // #ifdef H5
  var jweixin = require('js_sdk/jweixin-module/index.js')
  var clipBoard = require('js_sdk/ican-clipBoard/ican-clipBoard.js')
  // #endif
  export default {
    data() {
      return {
        voteList: [],
        vote: [],
        list: [],
        isWx: false,
        isShow: false,
        phonelist: [],
        userinfo: [],
      }
    },
    onLoad(options) {
      gpUserInfo().then((res) => {
        this.userinfo = res.result
      })
      var that = this
      if (options.id) {
        that.id = options.id
        that.voteInfo()
        that.getvoteList()
      }
    },
    onShow(){
      // #ifdef H5
      console.log('分享')
      this.$wxSetShare()
      // #endif
      this.getSetShare()
    },
    methods: {
      onClose(e) {
        this.isShow = false
      },
      isSel(id) {
        const some = this.voteList.some(function (item) {
          //目前页面选中
          return item == id
        })
        if (this.canVote) {
          if (!some) {
            return 1
          } else return 2
        } else return 3
      },
      //已选择投票
      selVote(id) {
        const index = this.voteList.indexOf(id)
        if (index == -1) {
          console.log(this.voteList.length)
          if (this.voteList.length < this.vote.voteMaxnum) {
            this.voteList.push(id)
          } else {
            this.$api.msg(
              '每次投票只能在' + this.vote.voteMinnum + '个 至 ' + this.vote.voteMaxnum + '个 之间'
            )
          }
        } else this.voteList.splice(index, 1)
      },
      //用户投票-投票
      addVote() {
        var that = this

        // let val = that.phonelist.some(x=> x == that.userinfo.userPhone);
        // //console.log(']]]]]]]]]',that.userinfo.userPhone,val)
        // if(!val){
        // 	uni.showModal({
        // 		title: "温馨提示",
        // 		content: '您无权投票',
        // 		showCancel: false
        // 	})
        // 	return;
        // }
        if (
          that.voteList.length < that.vote.voteMinnum ||
          that.voteList.length > that.vote.voteMaxnum
        ) {
          return this.$api.msg(
            '投票只能在' + that.vote.voteMinnum + '个 至 ' + that.vote.voteMaxnum + '个 之间'
          )
        }
        const param = { mainId: that.id, voteList: that.voteList }
        addVote(param).then((res) => {
          if (res.success) {
            this.$api.msg('投票成功')
            that.voteInfo()
            that.getvoteList()
            this.voteList = []
          } else {
            this.$api.msg(res.message)
          }
        })
      },
      //用户投票详情
      voteInfo() {
        var that = this
        let param = {
          pageNo: '1',
          pageSize: '200',
          voteId: that.id,
          column: 'voteoptionNum',
          order: 'desc',
        }
        voteInfo(param).then((res) => {
          that.list = []
          res.result.records.forEach((ele) => {
            ele['voteoptionPic'] = this.$api.getImgUrl(ele.voteoptionPic)
            ele['voteoptionVideourl'] = this.$api.getImgUrl(ele.voteoptionVideourl)
            that.list.push(ele)
          })
        })
        param = { voteId: that.id }
        canVote(param).then((res) => {
          if (res.success) {
            that.canVote = true
          } else that.canVote = false
        })
      },
      //投票管理-分页列表查询
      getvoteList() {
        const param = { id: this.id,pageSize: 1,pageNo: 1 }
        getvoteList(param).then((res) => {
          if (res.success) {
            this.vote = res.result.records[0]
            this.vote['votePic'] = this.$api.getImgUrl(this.vote['votePic'])
          }
        })
        this.getSetShare()
      },
      //分享
      onShare() {
        //判断是否微信浏览器
        var that = this
        if (that.isWx) {
          that.isShow = true
        } else {
          uni.setClipboardData({
            data: window.location.href,
            success: function (data) {
              that.$api.msg('已复制到剪切板,请到微信,钉钉等平台粘贴分享')
            },
            fail: function (err) {},
            complete: function (res) {},
          })
        }
      },
      //分享次数之类的
      getSetShare() {
        // 因为对axios进行了封装，所以，这里使用到了async await
        const that = this
        var url = ''
        var href = window.location.href
        url = href.split('#')[0] //截取当前地址栏的URL，（不带#hash部分）
        const params = {
          url: url,
        }
        getSignature(params).then((res) => {
          const rtData = JSON.parse(res.result)
          jweixin.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: rtData.appId, // 必填，公众号的唯一标识
            timestamp: rtData.timeStamp, // 必填，生成签名的时间戳
            nonceStr: rtData.nonceStr, // 必填，生成签名的随机串
            signature: rtData.signature, // 必填，签名，见附录1
            jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          })
          jweixin.error(function (res) {
            //window.location.reload()
          })
          jweixin.ready(function () {
            that.isWx = true
            jweixin.updateAppMessageShareData({
              title: data.title, // 分享标题
              desc: data.summary, // 分享描述
              link: data.href, // 分享链接
              imgUrl: data.imageUrl, // 分享图标
              // title: that.shareInfo.title, // 分享标题
              // desc: that.shareInfo.summary, // 分享描述
              // link: that.shareInfo.href, // 分享链接
              // imgUrl: that.shareInfo.imageUrl, // 分享图标
              success: function () {},
              cancel: function () {},
            })
            //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
            jweixin.updateTimelineShareData({
              title: data.title, // 分享标题
              desc: data.summary, // 分享描述
              link: data.href, // 分享链接
              imgUrl: data.imageUrl, // 分享图标
              success: function () {},
              cancel: function () {
                // 用户取消分享后执行的回调函数
              },
            })
          })
        })
      },
    },
  }
</script>

<style lang="scss">
  .page_box {
    min-height: 100vh;

    .top_img {
      width: 100%;
      height: 500rpx;
      position: relative;
      width: 100%;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .b_box_mian {
      position: fixed;
      bottom: 130rpx;
      width: 100%;
      z-index: 99;
      .b_box_msg {
        font-size: 20rpx;
        color: #f58731;
        background-color: #fcfcfc;
        padding: 10rpx;
        text-align: center;
      }
      .b_box {
        background-color: #ffffff;
        display: flex;
        flex-direction: row;
        height: 100rpx;
        line-height: 100rpx;

        width: 100%;
        padding-left: 30rpx;
        .b_box1 {
          width: calc(100% - 200rpx);
        }
        .b_box2 {
          width: 200rpx;
          background: #f58731;
          text-align: center;
          color: #ffffff;
        }
        .nobtn {
          background: #cccccc;
        }
        .select {
          margin: 0 10rpx;
          font-size: 40rpx;
          color: #f58731;
        }
      }
    }

    .top_con {
      padding: 0 40rpx;
      margin-top: -100rpx;
      position: relative;
      z-index: 10;

      .top_con_box {
        box-shadow: 0 0 5px #cccccc;
        border-radius: 20rpx;
        padding: 30rpx;
        background-color: #ffffff;

        .vote_title_r {
          width: 100%;
          height: 30rpx;
          margin-top: 30rpx;
          text-align: right;
          image {
            width: 30rpx;
            height: 30rpx;
            margin-left: 10rpx;
            margin-bottom: -6rpx;
          }
          .mc {
            margin: 0 10rpx;
            font-weight: bold;
            font-size: 30rpx;
            color: #d8271c;
          }
        }

        .vote_title {
          text-align: center;
          font-size: 36rpx;
          margin-bottom: 20rpx;
        }

        .vote_time {
          padding: 20rpx;
          font-size: 22rpx;
          .times {
            padding: 5rpx 20rpx;
            background-color: #f58731;
            color: #ffffff;
            border-radius: 30rpx;
          }
        }
        .vote_cons {
          line-height: 46rpx;
          font-size: 28rpx;
          text-indent: 2em;
          margin-top: 20rpx;
        }
      }
    }

    .vote_box {
      padding: 25rpx;
      margin-bottom: 120rpx;
      display: flex;
      display: -webkit-flex;
      -webkit-box-pack: justify;
      flex-direction: row;
      flex-wrap: wrap;
      .vote_item {
        width: calc(50% - 30rpx);
        margin: 15rpx;
        border-radius: 10rpx;
        box-shadow: 0 0 5px #cccccc;
        text-align: center;

        .vote_mc {
          position: absolute;
          z-index: 10;
          background-color: #d8271c;
          color: #ffffff;
          padding: 10rpx 20rpx;
          border-radius: 10rpx 0 10rpx 0;
          font-size: 24rpx;
        }
        .vote_box1 {
          padding: 20rpx;
          .vote_img {
            width: 100%;
            height: 200rpx;
            image {
              width: 100%;
              height: 100%;
              border-radius: 10rpx;
            }
          }

          .vote_number {
            margin-top: 40rpx;
            font-size: 36rpx;
          }
          .vote_name {
            margin-top: 15rpx;
            font-size: 30rpx;
          }
          .vote_btn {
            margin-top: 15rpx;
            background-color: #f58732;
          }
          .vote_btn_disable {
            margin-top: 15rpx;
            background-color: #cccccc;
          }
        }
      }
    }
  }
</style>
